fix(docs): prevent search overlay overlapping branding on mobile Closes #1660 #1661
Conversation
|
Hey team 👋 This PR addresses #1660 by updating the CSS & handleClick to prevent the search overlay from overlapping the npm docs logo on mobile devices. I’ve tested it in both mobile and desktop views to ensure everything looks good. Let me know if you’d like any changes or if there’s a preferred approach for handling the header during search. Thanks so much for taking the time to review this! |
Mohit5Upadhyay
had a problem deploying
to
github-pages
GitHub Actions
Failure
There was a problem hiding this comment.
@Mohit5Upadhyay This is great, thank you! I have just a couple ideas that would make this a little less heavy-handed on the z-index and more extensible for later
For constants we could add this:
export const Z_INDEX = {
HEADER: 10,
SEARCH_OVERLAY: 25
}Then we can do
import {HEADER_HEIGHT, Z_INDEX, HEADER_BAR} from '../constants'
...
<FocusOn returnFocus={true} onEscapeKey={() => resetAndClose(true)}>
<Box
sx={{
...
zIndex: Z_INDEX.SEARCH_OVERLAY,
}}
>
...
<Box sx={{display: 'flex', flexDirection: 'column', height: resultsOpen ? '100%' : 'auto'}}>
<Box
sx={{
...
zIndex: Z_INDEX.SEARCH_OVERLAY + 1,
}}
> And a quick edit of the header.js file
import {HEADER_HEIGHT, HEADER_BAR, Z_INDEX} from '../constants'
...
<DarkTheme sx={{top: 0, position: 'sticky', zIndex: Z_INDEX.HEADER}}>If you rebase on main, the linter should start passing for you now as well (though the publisher won't currently work for fork prs)
Mohit5Upadhyay
force-pushed
the
fix-1660-search-bar-overlap
branch
from
94a06db to
099221c
Compare
|
Hi @owlstronaut 👋 Thanks! |
Mohit5Upadhyay
had a problem deploying
to
github-pages
GitHub Actions
Failure
|
@Mohit5Upadhyay quick lint fix for you, then I expect I can just validate the change one more time and merge 😄 |
…as per review feedback
|
Hi @owlstronaut, I’ve fixed the Prettier formatting issues in Thanks! |
Description
This PR fixes issue #1660 a mobile view bug where the search overlay was overlapping the “npm docs” logo, causing a cluttered visual appearance and also the search button will remain visible even when we click the search Button.
Actual
issue-search-box.mp4
Updated
issue-resolved-search.mp4
References
Closes #1660